
import { useEffect } from 'react';
import ProForm, { ModalForm, ProFormText, ProFormSwitch, ProFormSelect } from '@ant-design/pro-form';
import { message } from 'antd';
import { connect } from 'umi';
import { useState } from 'react';
import AliyunOssUpload from '@/components/AliyunOSSUpload';

const ossUrl = process.env.OSS_URL;

function ModalFormItem(props: {
  isEdit: boolean;
  currentRow: any;
  formModalVisible: boolean;
  handleModalVisible: any;
  setDataSource: any;
  dataSource: any;
  actionRef: any;
  formRef: any;
  [key: string]: any;
}) {
  const { isEdit, currentRow, formModalVisible, handleModalVisible, actionRef, formRef, dispatch } = props;

  const formItemLayout = { labelCol: { span: 5 }, wrapperCol: { span: 17 } };
  // 权限
  const [roleList, setRoleList] = useState([]);
  useEffect(() => {

    // 状态
    if (currentRow) {
      currentRow.status = currentRow.status === 1;
    }
    // 回显
    if (isEdit) {
      if(currentRow.logo){
        currentRow.pic=[{
          url:ossUrl+currentRow.logo ,
          path: currentRow.logo
      }]
      }


      formRef?.current?.setFieldsValue(currentRow);
    }


  }, [isEdit]);


  useEffect(() => {
    if(formModalVisible){
      getRoleList();
    }


  }, [formModalVisible]);
  // 列表查询
  const getRoleList = ( ) => {
      dispatch({
        type: 'role/getMyList',
        payload:isEdit?currentRow.roleIdList:[],
        callback: (response: any) => {
          if (response.code === 1) {
            let data=[];
            // 新增排除商户权限
          
            
            response.data.forEach((item, index, array) => {
              if( isEdit || item.id!=="614547299561123840"){
                data.push({
                  value: item.id,
                  label: item.roleName,
                })
              }
             
            })
            setRoleList(data);
          }
        }
      });

  }
  const onUsernameChange = (e) => {
    
    const value=e.target.value.replaceAll(" ",'').replaceAll(/([^\u0000-\u00FF])/g,'');
    formRef?.current?.setFieldsValue({ username: value });
   
  }
 

  return (
  <ModalForm<{
      name: string;
      desc?: string;
    }>
      title={isEdit ? '编辑' : '新建'}
      width="600px"
      formRef={formRef}
      visible={formModalVisible}
      onVisibleChange={handleModalVisible}
      layout='horizontal'
      {...formItemLayout}
      modalProps={{
        maskClosable: false,
      }}
      onFinish={async (value) => {
        let { pic,...data }=value;

        const fromData = {
          ...data,
          status: (data.status ? 1 : 0),
          id: isEdit ? currentRow.id : undefined,
          username: isEdit ? undefined : data.username,
          logo:(pic && pic.length>0)? pic[0].path:''
        }

        const hide = message.loading('操作中');
        // 修改
        dispatch({
          type: isEdit ? 'sysUser/updateObject' : 'sysUser/addNewUser',
          payload: fromData,
          callback: (res) => {
            if (res.code === 1) {
              hide();
              handleModalVisible(false);
              message.success('操作成功');
              actionRef?.current?.reload(); // 此处reload 不可省

            } else {
              hide();

              message.error(res.msg);
              return false;
            }

          }
        });
      }}

    >
      <ProFormText
        rules={[
          {
            max: 20,
            min: 1,
            message: '请输入1-20个字符！',
            required: true, 
          },
        ]}
        label="用户名"
        width="md"
        name="username"
        disabled={isEdit}
        fieldProps={{
          onChange: onUsernameChange
        }}
       
      />

      {/* {
        isEdit ? '' : <ProFormText.Password rules={[
          {
            max: 20,
            min: 1,
            message: '请输入1-20个字符！',
            required: true,
          },
        ]} width="md" name="password" label="密码" />
      } */}



      <ProFormText
        rules={[
          {
            max: 20,
            min: 1,
            message: '请输入1-20个字符！',
            required: true,
          },
        ]}
        label="用户昵称"
        width="md"
        name="nickName"
      />

 <ProForm.Item label="头像" name="pic" >
<AliyunOssUpload
          maxNumber={1}
          showPreviewIcon
          showRemoveIcon
          businessName="sysUserImg"
          listType={'picture-card'}
          fileType={'jpeg,jpg,png'}
          size={20}
        />
</ProForm.Item>
      {/* <ProFormText
        rules={[
          {
            type: 'email',
            message: '请输入正确的邮箱！',
          },
          {
            max: 80,
            message: '请输入0-80个字符！',

          },
        ]}
        label="邮箱"
        width="md"
        name="email"
      />

      <ProFormText
        rules={[
          {
            max: 20,
            min: 0,
            message: '请输入0-20个字符！',

          },
        ]}
        label="手机号"
        width="md"
        name="mobile"
      /> */}

      <ProFormSwitch label="停用" name="status" />

      <ProFormSelect
       mode="multiple"
        options={roleList}

        width="md"
        name="roleIdList"
        label="权限"
      />
    </ModalForm>
  );
}


export default connect(
  ({ loading }: { index: any; loading: any }) => ({

    loading: loading.models.sysUser,
  }),
)(ModalFormItem);
